<template>
  <view>
    <view class="p-l-8 p-b-20">
      <DaTree
        ref="DaTreeRef"
        :data="menuPermOptions"
        :defaultExpandAll="true"
        :showCheckbox="true"
      />
    </view>
    <wd-fab v-model:active="showFab" type="primary" position="right-top" direction="bottom">
      <wd-button custom-class="custom-button" type="primary" @click="doCheckedTree(rootKeys, true)">
        全 选
      </wd-button>
      <wd-button custom-class="custom-button" type="error" @click="doCheckedTree(rootKeys, false)">
        全不选
      </wd-button>
      <wd-button custom-class="custom-button" type="success" @click="doExpandTree('all', true)">
        全展开
      </wd-button>
      <wd-button custom-class="custom-button" type="warning" @click="doExpandTree('all', false)">
        全收起
      </wd-button>
    </wd-fab>
    <!-- 底部按钮 -->
    <view class="footer-buttons" style="">
      <wd-button size="medium" type="primary" block @click="handleAssignPermSubmit">
        确 定
      </wd-button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import RoleAPI from "@/api/system/role";
import MenuAPI from "@/api/system/menu";
import DaTree from "@/components/da-tree/index.vue";
import { useMessage } from "wot-design-uni";
const message = useMessage();

let roleId = ref<number>(null); // 操作的角色ID
const menuPermOptions = ref<OptionType[]>([]); // 所有菜单
let rootKeys = ref<number[]>([]); // 根节点数组
const DaTreeRef = ref(); // 树引用
const showFab = ref(); // 悬浮按钮是否展开

/**
 * 分配菜单权限页面数据初始化
 */
async function initAssignPerm() {
  // 获取所有的菜单
  menuPermOptions.value = await MenuAPI.getOptions(false);
  console.log("menuPermOptions.value", menuPermOptions.value);
  rootKeys.value = menuPermOptions.value.map((item) => item.value);
  // 回显角色已拥有的菜单
  RoleAPI.getRoleMenuIds(roleId.value).then((data) => {
    const checkedMenuIds = data;
    console.log("checkedMenuIds=", checkedMenuIds);
    if (checkedMenuIds && checkedMenuIds.length > 0) {
      DaTreeRef.value?.setCheckedKeys(checkedMenuIds, true);
    }
  });
}

// 展开/收起树节点
function doExpandTree(keys, expand) {
  DaTreeRef.value?.setExpandedKeys(keys, expand);
  showFab.value = false;
}
// 选中/取消树节点
function doCheckedTree(keys, checked) {
  DaTreeRef.value?.setCheckedKeys(keys, checked);
  showFab.value = false;
}

// 分配菜单权限提交
function handleAssignPermSubmit() {
  if (roleId.value) {
    const checkedMenuIds: number[] = DaTreeRef.value?.getCheckedKeys();
    RoleAPI.updateRoleMenus(roleId.value, JSON.stringify(checkedMenuIds)).then(() => {
      uni.showToast({ title: "分配权限成功", icon: "success" });
      uni.navigateBack({ delta: 1 });
    });
  }
}

onLoad((options: any) => {
  if (options && options.id) {
    roleId.value = options.id;
  }
  initAssignPerm();
});
</script>

<style lang="scss" scoped>
.footer-buttons {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 20rpx;
  background-color: #fff;
}

:deep(.custom-button) {
  box-sizing: border-box;
  width: 64px !important;
  min-width: auto !important;
  height: 32px !important;
  margin: 8rpx;
  border-radius: 16px !important;
}
</style>
